<mat-drawer-container class="h-full" displayDensity="compact" autoresize waResizeBox="content-box" (waResizeObserver)="onResize($event)">
    <mat-drawer #drawer mode="over" position="end" [(opened)]="drawerOpened" class="ngm-settings-panel__drawer">
        <mat-toolbar class="ngm-settings-panel__drawer-drawer flex justify-start items-center gap-2">
            <button mat-icon-button type="button" displayDensity="cosy" (click)="closeDrawer()">
                <span class="flex">
                    <mat-icon>chevron_right</mat-icon>
                </span>
            </button>
            <span class="flex-1">{{ drawerTitle }}</span>

            <button *ngIf="!liveMode" type="submit" mat-icon-button color="primary" displayDensity="cosy"
                [matTooltip]="'STORY.DESIGNER.SUBMIT' | translate: {Default: 'Submit'}"
                (click)="submitDrawer()">
                <mat-icon>done</mat-icon>
            </button>

            <button mat-icon-button type="button" displayDensity="cosy" ngmAppearance="danger" class="ngm-settings-panel__drawer-cancel"
                [matTooltip]="'STORY.DESIGNER.DELETE' | translate: {Default: 'Delete'}"
                (click)="remove()">
                <mat-icon fontSet="material-icons-round">
                    delete
                </mat-icon>
            </button>
        </mat-toolbar>

        <div style="flex: 1; max-height: 100%; overflow: auto;">
            <ng-template [cdkPortalOutlet]="drawerPortal"></ng-template>
        </div>
    </mat-drawer>
    <mat-drawer-content class="ngm-settings-panel__drawer-content">
        <ng-template [cdkPortalOutlet]="settingsPortal"></ng-template>
      
      @if (settingsPortals) {
        <mat-tab-group #tabGroup class="h-full" mat-stretch-tabs preserveContent fitInkBarToContent>
          @for (settingsPortal of settingsPortals; track settingsPortal) {
            <mat-tab>
                <ng-template mat-tab-label>
                  @if (settingsPortal.icon) {
                    <mat-icon fontSet="material-icons-outlined">{{settingsPortal.icon}}</mat-icon>
                  }
                    <span>{{settingsPortal.label | translate: {Default: settingsPortal.label} }}</span>
                </ng-template>
                <ng-template [cdkPortalOutlet]="settingsPortal.portal"></ng-template>
            </mat-tab>
          }
        </mat-tab-group>
      }
    </mat-drawer-content>
</mat-drawer-container>
